<script setup lang="ts">
interface menu {
  id?: number | string;
  label: string;
  path: string;
  menuHide?: boolean;
  nickName?: string;
  icon?: string;
  index?: string;
  children?: menu[];
}
interface MenuProps {
  menu_list: menu[];
  default_openeds?: string[];
  collapse?: boolean;
  homePage?: string;
}
/** 父组件传参
 * @param menu_list 菜单列表
 */
const { menu_list } = defineProps<MenuProps>();
const route = useRoute();
let parentsList = ref();
parentsList.value = getData();
function getData() {
  let result: menu[] = [];
  getAllParents(menu_list, route.path, result);
  return result;
}
watch(
  () => route.path,
  () => {
    parentsList.value = getData();
  },
  { immediate: true }
);
/**
 * 从树状列表中获取指定节点的所有父节点
 *
 * @param treeList 树状列表，包含多个节点
 * @param value 目标节点的路径值
 * @param parents 存储父节点的数组
 * @returns 如果找到目标节点，返回包含所有父节点的数组；否则返回null
 */
function getAllParents(treeList: menu[], value: string, parents: menu[]) {
  // 遍历树中的每个节点
  for (const node of treeList) {
    // 如果找到目标节点
    if (node.path === value) {
      parents.push(node);
      // 返回所有父节点
      return parents;
    }
    if (node.children && node.children.length > 0) {
      parents.push(node);
      const result: any = getAllParents(node.children, value, parents);
      if (result) {
        return result;
      }
      // 如果递归未找到，则移除当前节点
      parents.pop();
    }
  }
  // 如果遍历完整棵树未找到，返回null
  return null;
}
</script>
<template>
  <el-breadcrumb separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item
        :data-index="index"
        v-for="(item, index) in parentsList"
        :key="item.path"
        >{{ item.label }}</el-breadcrumb-item
      >
    </transition-group>
  </el-breadcrumb>
</template>
<style scoped>
.breadcrumb-move,
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
.breadcrumb-leave-active {
  position: absolute;
}
</style>
